import validate from '../../libs/validate';
import headerImgUploader from "../Components/headerImgUploader";

export default {
    components: {
        headerImgUploader
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            showModal: false,
            bannerList: [],
            modalLoading: '',
            selectBanner: '',
            uploadImgCallbackPath: '',
            uploadImgData: {},
            bannerForm: {
                app_media_banner_type_code: '',
                link_type_code: '',
                name: '',
                link_url: '',
                link_detail_id: '',
                orders: 0,
                isShow: true
            },
            bannerFormRules: {
                app_media_banner_type_code: [{
                    required: true,
                    message: '请选择一个类型',
                    trigger: 'change'
                }],
                name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                link_type_code: [{
                    required: true,
                    message: '请选择一个类型',
                    trigger: 'change'
                }],
                link_url: [{
                    required: false,
                    validator: validate.can_empty_url,
                    trigger: 'blur'
                }]

            },
            linkDetailTypeList: []
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        doSearch() {
            this.pageNum = 1;
            this.getBannerList()
        },
        clearSearch() {
            this.searchKey = '';
            this.pageNum = 1;
            this.getBannerList()

        },
        changePage(num) {
            this.pageNum = num;
            this.getBannerList()
            document.querySelector('.single-page-con').scrollTo(0, 0)
        },
        getBannerList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetBannerListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.bannerList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        clickOK() {
            this.changeLoadingStatus(true)
            if (!this.uploadImgCallbackPath) {
                this.changeLoadingStatus(false);
                this.errorHandle("请先上传图片！");
                return;
            }
            this.$refs.bannerForm.validate(valid => {
                if (!valid) {
                    this.changeLoadingStatus(false);
                    return
                }
                let postData = JSON.parse(JSON.stringify(this.bannerForm));
                postData.token = this.user.tokenList[0];
                postData.is_show = this.bannerForm.isShow ? '1' : '0';
                postData.img_url = this.uploadImgCallbackPath;
                postData.link_url = encodeURIComponent(postData.link_url)

                if (this.selectBanner) {
                    postData.uuid = this.selectBanner.uuid;
                }
                delete postData.isShow
                this.http.post(this.postUrl.addOrEditBannerUrl, postData).then((data) => {
                    if (data.code > -1) {
                        this.$Notice.success({
                            title: this.selectBanner ? '修改成功！' : '新增成功！'
                        })
                        this.showModal = false;
                        this.getBannerList();
                    } else {
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                }, () => {
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        editBanner(banner) {
            this.selectBanner = banner;
            console.log(banner);
            this.uploadImgCallbackPath = banner.img_url;
            this.bannerForm = {
                app_media_banner_type_code: this.selectBanner.app_media_banner_type_code,
                link_type_code: this.selectBanner.link_type_code,
                name: this.selectBanner.name,
                link_url: this.selectBanner.link_url,
                link_detail_id: this.selectBanner.link_detail_id,
                orders: this.selectBanner.orders,
                isShow: this.selectBanner.is_show == '1' ? true : false
            }
            this.showModal = true;
        },
        uploadImgSuccess(data) {
            this.uploadImgCallbackPath = data;
        },
        createImgUploadData() {
            //上传图片
            let uploadImgData = {
                token: this.user.tokenList[0],
                type: 1,
                app_key: this.http.app_key,
                timestamp: "2017-09-26 15:52:28"
            }
            let uploadImgDataSign = this.http.getSign({
                type: 1,
                token: this.user.tokenList[0]
            });
            uploadImgData.sign = uploadImgDataSign;
            this.uploadImgData = uploadImgData;
        },
        linkTypeCodeChange(type) {
            if (type == 'WEB' || !this.showModal) return
            this.bannerForm.link_url = '';
            this.http.post(this.postUrl.getBannerJumpTypeUrl, {
                token: this.user.tokenList[0],
                link_type_code: type
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.linkDetailTypeList = data.data
                } else {
                    this.errorHandle('类型查询失败')
                }
            }, () => {
                this.errorHandle('网络错误，类型查询失败')
            })
        },
        deleteBanner(banner) {
            this.$Modal.confirm({
                title: '提示',
                loading: true,
                content: '<p>确定要删除这个Banner?</p>',
                onOk: () => {
                    this.http.post(this.postUrl.deleteBannerUrl, {
                        token: this.user.tokenList[0],
                        uuid: banner.uuid
                    }).then((data) => {
                        if (data.code > -1) {
                            this.$Notice.success({
                                title: '操作成功！',
                            })
                            if (this.bannerList.length === 1) {
                                this.pageNum = 1;
                            }
                            this.getBannerList()
                        } else {
                            this.errorHandle(data.msg)
                        }
                    }, () => {
                        this.errorHandle()
                    }).then(() => {
                        this.$Modal.remove();
                    })
                },
            });
        }
    },
    created() {
        if (this.user) {
            this.getBannerList()
            this.createImgUploadData()
        }

    },
    watch: {
        user(val, old) {
            if (val && !old) {
                this.getBannerList()
                this.createImgUploadData()


            }
        },
        showModal(val) {
            if (!val) {
                this.selectBanner = '';
                this.uploadImgCallbackPath = "";
                this.bannerForm = {
                    app_media_banner_type_code: '',
                    link_type_code: '',
                    name: '',
                    link_url: '',
                    link_detail_id: '',
                    orders: 0,
                    isShow: true
                }
                this.$refs.bannerForm.resetFields()

            }
        }
    }
}
